<template>
  <!-- 折线图 -->
  <div :id="id" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "90%",
    },

  },
  data() {
    return {
      chart: null,
    };
  },

  methods: {
    initChart(legendData, xAxisData, series, title) {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chart.setOption({
        title,
        grid: {
          top: "10%",
          left: "2%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let tooltip = params[0].name + '<br>';
            params.forEach(param => {
              tooltip += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${param.color};"></span>`;
              tooltip += param.seriesName + '：' + param.value.toFixed(2) + '<br>';
            });
            return tooltip;
          }
        },
        legend: {
          show: legendData.show,
          data: legendData.data,
          left: "center",
          bottom: "bottom",
        },

        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: series
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
